<template>
  <div class="form_engine_page">
    <FormEngin 
      :schema="formSchema" 
      :initValues="initialValues"
      @submit="handleSubmit">
      <template #footer="{submit: handleSubmit2}">
        <el-button type="primary" @click="handleSubmit2">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </template>
    </FormEngin>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import FormEngin from './FormEngine.vue';

const initialValues = ref({ name: '', sex: '男' })

// 表单配置项
const formSchema = ref({
  labelWidth: '100px',
  inline: true,
  fieldWidth: '300px',
  items: [
    {
      field: 'name',
      label: '姓名',
      type: 'input',
      clearable: true,
      rules: [{ required: true, message: '请输入姓名' }]
    },
    {
      field: 'sex',
      label: '性别',
      type: 'select',
      clearable: true,
      options:[{value:'男',label:'男'},{value:'女',label:'女'}],
      rules:[{required:true,message:'请选择性别'}],
      placeholder:'请选择性别'
    }
  ]
})

const handleSubmit = (submitData) => {
  console.log("🚀 ~ handleSubmit ~ submitData:", submitData)
}

</script>
<style scoped lang="scss">
.form_engine_page {
  width: 100%;
  height: 100%;
}
</style>